<template>
	<view class="">
		<view class="tab-box">
			<view class="top _df _ac _jb">
				<u-tabs
					class="tabs"
					ref="tabs" 
					:list="tabList" 
					active-color="#191919" 
					inactive-color="#C2C2C2" 
					font-size="40" 
					:gutter="0"
					height="110"
					bar-height="8"
					:is-scroll="true"
					bg-color="none"
					@change="tabChange"
					:active-item-style="activeitemstyle"
					:current="current">
				</u-tabs>
				<navigator class="search" url="/pages/tabbar/music/search">
					<image src="@/static/img/index/search.png" mode=""></image>
				</navigator>
			</view>
			<view class="tab2">
				<u-tabs
					class="tabs2"
					ref="tabs2" 
					:list="tabList2" 
					active-color="#fff" 
					inactive-color="#7B7B7B" 
					font-size="30" 
					:gutter="30"
					name="secondType"
					height="60"
					:is-scroll="true"
					bg-color="none"
					@change="tabChange2"
					:active-item-style="activeitemstyle2"
					:current="current2">
				</u-tabs>
			</view>
		</view>
		<view class="content">
			
			<view class="box1" v-if="current2 == 0">
				<u-swiper 
					:list="swiper" 
					:height="330" 
					:autoplay="true" 
					border-radius="24" 
					mode="round"
					interval="4000"
					@click="clickSwiper"
					indicator-pos="bottomLeft">
				</u-swiper>
			</view>
			<view class="title-box" v-if="current == 0 && current2 == 0 && isLogin && musicList1.length>0">
				最近收听
			</view>
			<view class="box2" v-if="current == 0 && current2 == 0 && isLogin && musicList1.length>0">
				<view class="item" @click="toView(item,1,index)" v-for="(item,index) in musicList1" :key="index">
					<view class="img-box">
						<image :src="item.coverUrl" mode=""></image>
					</view>
					<view class="title clamp1">
						{{item.fileName}}
					</view>
					<view class="info clamp1">
						{{item.fileLabel}}
					</view>
				</view>
				
			</view>
			<view class="title-box" v-if="current2 == 0">
				为你推荐
			</view>
			<view class="box3" v-if="musicList2.length>0">
				<view class="item" @click="toView(item,2,index)" v-for="(item,index) in musicList2" :key="index">
					<view class="img-box">
						<image :src="item.coverUrl" mode=""></image>
					</view>
					<view class="title clamp1">
						{{item.fileName}}
					</view>
					<view class="info clamp1">
						{{item.fileLabel}}
					</view>
				</view>
				
			</view>
			<view class="" v-else style="padding-top: 150rpx;">
				<u-empty text="暂无数据" mode="list"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import config from "@/utils/config.js";
	export default {
		data() {
			return {
				tabList: [
					{
						name: '音乐',
						type:0,
					}, {
						name: '正念',
						type:1,
					}, {
						name: '冥想',
						type:2,
					}, {
						name: '呼吸',
						type:3,
					},
				],
				tabList2: [],
				current: 0,
				current2: 0,
				activeitemstyle:{
					fontSize:'60rpx',
					textAlign: 'center',
					width:'180rpx'
				},
				activeitemstyle2:{
					
					height: '60rpx',
					// lineHeight:'60rpx',
					background: '#5a64c5',
					fontFamily: '$uni-font-family-Blod'
				},
				swiper: [],
				musicList1: [],
				musicList2: [],
				oneType:0,
				twoType:2,
				host:null,
				isLogin:false
			};
		},
		watch:{
			// current(v){
			// 	this.current = v
			// 	this.findClassification()
			// 	this.findBannerByType()
			// 	this.getHistory()
			// }
		},
		onShow() {
			this.findClassification()
			this.findBannerByType()
			this.getHistory()
			// this.findAllMusic()
			uni.$_addAccess(this)
		},
		onLoad(options) {
			if(options.type){
				this.current = options.type
				this.oneType = options.type
			}
			this.host = config.host1
			if(uni.$_getToken()){
				this.isLogin = true
			}
		},
		methods:{
			//查询分类
			findClassification(){
				let that = this
				uni.$_get({
					url: "findClassification|" + this.oneType,
					that: that,
					success(res) {
						let data = res.data;
						if(res.code == 0){
							that.tabList2 = data
							that.twoType = that.tabList2[that.current2].id
							that.findAllMusic()
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			//banner
			findBannerByType(){
				let that = this
				uni.$_get({
					url: "findBannerByType|" + this.oneType,
					that: that,
					success(res) {
						let data = res.data;
						if(res.code == 0){
							data.map(item =>{
								if(!item.fileLink.includes('http')){
									// item.fileLink  = config.host1 + item.fileLink
									item.image  = config.host1 + item.fileLink
								}else{
									item.image  = item.fileLink
								}
								
							})
							
							that.swiper = data
							
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			//最近收听
			getHistory(){
				let that = this
				uni.$_get({
					url: "get-music-history",
					that: that,
					success(res) {
						let data = res.data;
						if(res.code == 0){
							data.map(item =>{
								if(!item.coverUrl.includes('http')){
									item.coverUrl  = config.host1 + item.coverUrl
								}
							})
							that.musicList1 = data
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			//推荐
			findAllMusic(){
				let that = this
				uni.$_get({
					url: "findMusicByType|" + this.twoType,
					that: that,
					success(res) {
						let data = res.data;
						let arr = []
						if(res.code == 0){
							data.map(item =>{
								if(!item.coverUrl.includes('http')){
									item.coverUrl  = config.host1 + item.coverUrl
								}
								arr.push(item)
							})
							
							that.musicList2 = arr
							console.log(that.musicList2)
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			// 轮播图跳转
			clickSwiper(e,type) {
				
				uni.navigateTo({
					url: '/pages/tabbar/music/view?type=0'
					 +'&oneType=' +this.oneType
					 +'&activeIndex=' +e
				});
			},
			tabChange(index) {
				if(index==3){
					uni.navigateTo({
						url:'/pages/comA/breathe/breathe'
					})
				}else{
					this.current = index;
					this.oneType = this.tabList[index].type
					this.current2 = 0
					this.findClassification()
					this.findBannerByType()
					
				}
			},
			tabChange2(index) {
				this.current2 = index;
				this.twoType = this.tabList2[index].id
				this.findAllMusic()
			},
			toView(e,type,index){
				uni.navigateTo({
					url: '/pages/tabbar/music/view?id=' 
					+ this.twoType
					+'&type=' + type 
					+'&oneType=' +this.oneType
					+'&activeIndex=' +index
				});
			},
		},
		onPullDownRefresh() {
			let that = this
			  uni.startPullDownRefresh({
				success() {
					that.findClassification()
					that.findBannerByType()
					that.getHistory()
				},
				fail() {
					
				}
				
			  })
		  uni.stopPullDownRefresh()
		}
		
	}
</script>

<style lang="scss" scoped>
	.tab-box{
		position: sticky;
		top: 0;
		width: 100%;
		padding: 100rpx 30rpx 30rpx;
		z-index: 3;
		// margin-bottom: 50rpx;
		background: #F2F6FE url(@/static/img/index/indexTop.png) no-repeat top center / 100% auto;
		.top{
			margin-bottom: 30rpx;
			position: relative;
			.tabs{
				width: 100%;
			}
			.search{
				image{
					width: 38rpx;
					height: 38rpx;
				}
			}
			/deep/.u-tab-item{
				font-size: 40rpx;
				width: 130rpx !important;
				font-family: $uni-font-family-Heavy;
			}
			/deep/.u-tab-bar{
				background-color: #434FD0 !important;
			}
		}
		.tab2{
			/deep/.u-tab-bar{
				display: none;
			}
			/deep/.u-tab-item{
				border-radius: 30rpx;
				font-family: $uni-font-family-Medium;
				padding: 0 24rpx !important;
				transition-duration:0.3s !important;
			}
			
		}
	}
	.content{
		width: 100%;
		// min-height: 100vh;
		padding: 0 30rpx 30rpx;
		box-sizing: border-box;
		background: #F2F6FE ;
		.box1{
			overflow: hidden;
			margin-bottom: 50rpx;
			/deep/.u-list-image-wrap{
				border-radius: 0 !important;
			}
			/deep/.u-indicator-item-round{
				background-color:rgba(255,255,255,0.3);
				height: 8rpx;
				
			}
			/deep/.u-indicator-item-round-active{
				background-color: rgba(255,255,255,1);
			}
			/deep/.u-swiper-indicator{
				bottom: 24rpx !important;
				padding: 0 40rpx !important;
			}
		}
		.title-box{
			font-size: 36rpx;
			font-family: $uni-font-family-Heavy;
			color: #000000;
			margin-bottom: 40rpx;
		}
		.box2{
			overflow-x: auto;
			margin-bottom: 60rpx;
			white-space: nowrap;
			width: 100%;
			// width: 100%;
			.item{
				width: 246rpx;
				margin-right: 20rpx;
				display: inline-block;
				.img-box{
					width: 100%;
					height: 246rpx;
					border-radius: 20rpx;
					overflow: hidden;
					margin-bottom: 20rpx;
					image{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				.title{
					font-size: 30rpx;
					font-family: $uni-font-family-Heavy;
					color: #050505;
					margin-bottom: 10rpx;
				}
				.info{
					font-size: 24rpx;
					font-family: $uni-font-family-Medium;
					color: #aaa;
				}
			}
			.item:last-child{
				margin-right: 0;
			}
		}
		.box3{
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-column-gap: 30rpx;
			margin-bottom: 60rpx;
			.item{
				margin-bottom: 35rpx;
				.img-box{
					width: 100%;
					height: 330rpx;
					border-radius: 20rpx;
					overflow: hidden;
					margin-bottom: 20rpx;
					image{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				.title{
					font-size: 30rpx;
					font-family: $uni-font-family-Heavy;
					color: #050505;
					margin-bottom: 10rpx;
				}
				.info{
					font-size: 24rpx;
					font-family: $uni-font-family-Medium;
					color: #aaa;
				}
			}
		}
	}
</style>
